<template>
  <div class="my_draw">
    <div class="scrolltop" v-show="totop" @click="toTop">回到顶部</div>
    <div>
      <tab :line-width=2 active-color='#fc378c' v-model="index">
        <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
      </tab>
      <swiper v-model="index" ref="swiper" class="swiper" :show-dots="false">
        <swiper-item v-for="(item, index) in list2" :key="index">
          <div class="tab-swiper vux-center">
            <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="busy" infinite-scroll-distance="50">
              <div class="goods_list">
                <ul ref="goodsul">
                  <li ref="goodsli" class="goodsli" v-for="item in goods_list" :key="item.id">
                    <img class="goods_img" :src="item.img" alt="">
                    <div class="goods_text">
                      <p class="goods_name">{{item.name}}</p>
                      <p class="goods_word">{{item.time}}</p>

                      <div class="goods_join">
                        <div class="gold" v-show="index===0">
                          <p>{{item.status}}</p>

                        </div>
                        <router-link :to="index==1?'/LuckyCode':'/PrizeDetail'" class="btn" :style="{background:index==0&&item.status1==0?'#00a0e9':'#ffdb4f'}">
                        {{index==0&&item.status1==0?'开奖信息':index==0&&item.status1!==1?"领取奖品":'查看我的幸运码'}}</router-link>
                      </div>
                    </div>
                  </li>

                </ul>
                <load-more tip="loading" :show-loading="busy"></load-more>
              </div>
            </div>









          </div>
        </swiper-item>
      </swiper>
    </div>



  </div>
</template>

<script>
  import { Tab, TabItem, Swiper, SwiperItem, LoadMore } from "vux";
  export default {
    components: {
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      LoadMore
    },
    data() {
      return {
        busy: false,
        totop: false,
        demo2: "已开奖",
        index: 0,
        list2: ["已开奖", "未开奖"],
        goods_list: [
          {
            id: 1,
            name: "小米8 青春版 4GB+64GB",
            img: "https://i1.mifile.cn/a1/pms_1537323963.1278763!220x220.jpg",
            time: "2018-10-13 已结束",
            status: '已中奖'
          },
          {
            id: 2,
            name: "小米8 屏幕指纹版 8GB+128GB",
            img: "https://i1.mifile.cn/a1/pms_1537356460.6227958!220x220.png",
            time: "2018-10-13 已结束",
            status: '已中奖'
          },
          {
            id: 3,
            name: "小米8 SE 4GB+64GB",
            img: "https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg",
            time: "2018-10-13 已结束",
            status: '已中奖'
          },
          {
            id: 4,
            name: "小米MIX 2S 8GB+256GB",
            img: "https://i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg",
            time: "2018-10-13 已结束",
            status: '未中奖',
            status1: '0'
          },
          {
            id: 5,
            name: "小米MIX 2 全陶瓷尊享版",
            img: "https://i1.mifile.cn/a1/pms_1509723483.31416776!220x220.jpg",
            time: "2018-10-13 已结束",
            status: '已中奖'
          },

        ],
        addgoods_list: [
          {
            id: 6,
            name: "小米8 青春版 4GB+64GB",
            img: "https://i1.mifile.cn/a1/pms_1537323963.1278763!220x220.jpg",
            time: "2018-10-13 已结束",
            status: '已中奖'
          },
          {
            id: 7,
            name: "小米8 屏幕指纹版 8GB+128GB",
            img: "https://i1.mifile.cn/a1/pms_1537356460.6227958!220x220.png",
            time: "2018-10-13 已结束",
            status: '已中奖'
          },
          {
            id: 8,
            name: "小米8 SE 4GB+64GB",
            img: "https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg",
            time: "2018-10-13 已结束",
            status: '已中奖'
          },
          {
            id: 9,
            name: "小米MIX 2S 8GB+256GB",
            img: "https://i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg",
            time: "2018-10-13 已结束",
            status: '已中奖'
          },
          {
            id: 10,
            name: "小米MIX 2 全陶瓷尊享版",
            img: "https://i1.mifile.cn/a1/pms_1509723483.31416776!220x220.jpg",
            time: "2018-10-13 已结束",
            status: '已中奖'
          }
        ]
      };
    },
    watch: {
      index() {
        console.log(this.index);

        this.itemClick();
      }
    },
    methods: {
      itemClick() {
        if (this.index == 0) {

          this.goods_list = this.addgoods_list
          this.ULlenght(0)


        } else {

          var aa = [],
            aa = [
              {
                id: 8,
                name: "小米8 SE 4GB+64GB",
                img: "https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg",
                title: "AI 超感光双摄，三星 AMOLED 屏幕"
              },
              {
                id: 9,
                name: "小米MIX 2S 8GB+256GB",
                img: "https://i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg",
                title: "骁龙845 年度旗舰处理器，艺术品般陶瓷机身"
              },
              {
                id: 10,
                name: "小米MIX 2 全陶瓷尊享版",
                img: "https://i1.mifile.cn/a1/pms_1509723483.31416776!220x220.jpg",
                title: "全面屏2.0，Unibody 全陶瓷"
              }
            ]


          this.goods_list = aa
          this.ULlenght(1)
        }
      },
      loadMore() {

        this.busy = true;
        //官方示例中延迟了1秒，防止滚动条滚动时的频繁请求数据
        setTimeout(() => {
          //这里请求接口去拿数据，实际应该是调用一个请求数据的方法

          this.goods_list = this.goods_list.concat(this.addgoods_list);

          this.busy = false;


          this.ULlenght()
        }, 300);

      },
      ULlenght(index = 0) {
        console.log(index, 2132132);

        this.$nextTick(function () {
          setTimeout(() => {
            this.$refs.swiper.xheight = this.$refs["goodsul"][index].offsetHeight + 60 + "px";
          }, 15);
        });
      },
      toTop() {
        const timer = setInterval(function () {
          let osTop =
            document.documentElement.scrollTop || document.body.scrollTop;
          let ispeed = Math.floor(-osTop / 5);
          document.documentElement.scrollTop = document.body.scrollTop =
            osTop + ispeed;
          this.isTop = true;
          if (osTop === 0) {
            clearInterval(timer);
          }
        }, 30);
      },
    },
    mounted() {
      this.ULlenght(0)


      // 回到顶部
      var _this = this;
      window.addEventListener("scroll", function () {
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > 100) {
          _this.totop = true;
          //滚动条的高度，可以动态获取也可以写死
          //这里写要执行的操作
        } else {
          _this.totop = false;
        }
      });


    },
    created() { }
  };
</script>

<style scoped lang="less">
  @import "../style/base.less";
  .my_draw {

    .scrolltop {
      position: fixed;
      bottom: 50 / @px;
      right: 50 / @px;
    }
    height: 100%;
    .goods_list {
      background: #fff;
      ul {
        padding: 24 / @px;
        padding-bottom: 0;
        padding-top: 0;
        li {
          padding-bottom: 24 / @px;
          padding-top: 24 / @px;
          border-bottom: 1px solid #e6e6e6;
          display: flex;
          justify-content: center; // align-items: center;
          padding-bottom: 24 / @px;
          .goods_img {
            width: 180 / @px;
            height: 180 / @px;
          }
          .goods_text {
            flex: 1;
            margin-left: 25 / @px;
            overflow: hidden;
            .goods_name {
              font-size: 30 / @px;
              color: #1a1a1a;
            }
            .goods_word {
              margin-top: 10/@px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 26 / @px;
              color: #666;
            }

            .goods_join {
              margin-top: 18/@px;
              font-size: 24 / @px; // margin-top: 26/@px;
              // display: flex;
              // align-items: center;
              // justify-content: space-between;
              .gold {
                float: left;
                p:first-child {
                  font-size: 36/@px;
                  color: #ff0032;
                }
              }
              .btn {
                float: right;
                text-align: center;
                padding: 12/@px 14/@px;
                background: #ffdb4f;
                border-radius: 10 / @px; //   line-height: 60 / @px;
                font-size: 28 / @px;
                color: #1a1a1a;
              }
            }
          }
        }
      }
    }
  }
</style>